<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function makeLine(callback){
				let c1=document.createElement('canvas')
				c1.width=c1.height=500
				console.log(c1);
				var pen=c1.getContext('2d')
				callback(pen)
				pen.stroke()
				document.body.appendChild(c1)
			}
			
			makeLine(pen=>{
				// 开始绘制
				pen.beginPath()
				pen.moveTo(50,50)
				pen.lineTo(50,200)
				pen.lineTo(150,50)
				pen.lineTo(150,200)
				pen.lineTo(50,50)
				// 结束绘制
				pen.closePath()
				
				
				// 头尾锐角
				pen.lineCap='round'
				// 折点锐角
				pen.lineJoin="round"
				
				pen.strokeStyle="burlywood"
				pen.lineWidth=10
				
				pen.fillStyle="#B3D33F"
				pen.fill()
			})
			
			makeLine(pen=>{
				pen.moveTo(50,50)
				pen.lineTo(50,300)
				pen.lineTo(300,100)
				pen.lineTo(300,250)
				
				// 折点裁剪  值：1——3
				pen.miterLimit=2
				
				pen.strokeStyle="burlywood"
				pen.lineWidth=30
				
			})
			
			makeLine(pen=>{
				// 圆点位置  起始角度与结束角度  弧度
				pen.arc(300,300,100,0,Math.PI)
				
				pen.strokeStyle="#000000"
				
				pen.fillStyle="#B3D33F"
				pen.fill()
			})
			
			makeLine(pen=>{
				// 位置、宽高
				pen.rect(20,20,100,100)
				
				// 填充
				pen.fillStyle="#B3D33F"
				pen.fill()
				
				// 描边
				pen.strokeStyle="aqua"
				pen.lineWidth=20
			})
		</script>
	</body>
</html>
